<template>
  <div class="container">
    <div class="btn-box">
      <el-button type="primary" @click="addNewData"> 新增 </el-button>
    </div>
    <el-table
      :data="data"
      stripe
      border
      :cell-class-name="tableCellClassName"
      size="small"
      @cell-click="cellClick"
    >
      <el-table-column label="前超">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input-number
              v-model="scope.row.overFrontLength"
              controls-position="right"
              ref="overFrontLengthRef"
              size="small"
            >
            </el-input-number>
          </div>
          <span v-else>
            {{ scope.row.overFrontLength }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="后超">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input-number
              v-model="scope.row.overBackLength"
              controls-position="right"
              ref="overBackLengthRef"
              size="small"
            >
            </el-input-number>
          </div>
          <span v-else>
            {{ scope.row.overBackLength }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="左超">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input-number
              v-model="scope.row.overLeftLength"
              controls-position="right"
              ref="overLeftLengthRef"
              size="small"
            >
            </el-input-number>
          </div>
          <span v-else>
            {{ scope.row.overLeftLength }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="右超">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input-number
              v-model="scope.row.overRightLength"
              controls-position="right"
              ref="overRightLengthRef"
              size="small"
            >
            </el-input-number>
          </div>
          <span v-else>
            {{ scope.row.overRightLength }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="超高">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input-number
              v-model="scope.row.overHeightLength"
              controls-position="right"
              ref="overHeightLengthRef"
              size="small"
            >
            </el-input-number>
          </div>
          <span v-else>
            {{ scope.row.overHeightLength }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="超标件数">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input-number
              v-model="scope.row.overDigit"
              controls-position="right"
              ref="overDigitRef"
              size="small"
            >
            </el-input-number>
          </div>
          <span v-else>
            {{ scope.row.overDigit }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="超标体积">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input-number
              v-model="scope.row.overVolume"
              controls-position="right"
              ref="overVolumeRef"
              size="small"
            >
            </el-input-number>
          </div>
          <span v-else>
            {{ scope.row.overVolume }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="超标重量">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input-number
              v-model="scope.row.overGrossweight"
              controls-position="right"
              ref="overGrossweightRef"
              size="small"
            >
            </el-input-number>
          </div>
          <span v-else>
            {{ scope.row.overGrossweight }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button link type="danger" @click="deleteData(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    //详细数据
    tableData: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["update:tableData"],
  computed: {
    data: {
      get() {
        return this.tableData;
      },
      set(value) {
        this.$emit("update:tableData", value);
      },
    },
  },
  data() {
    return {
      rowIndex: -1, //行索引
      columnIndex: -1, //列索引
    };
  },
  methods: {
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      column.index = columnIndex;
      row.index = rowIndex;
    },
    //单元格被点击时会触发该事件
    cellClick(row, column, cell, event) {
      this.rowIndex = row.index;
      this.columnIndex = column.index;
      this.$nextTick(() => {
        if (column.label == "前超") {
          this.$refs["overFrontLengthRef"].focus();
        } else if (column.label == "后超") {
          this.$refs["overBackLengthRef"].focus();
        } else if (column.label == "左超") {
          this.$refs["overLeftLengthRef"].focus();
        } else if (column.label == "右超") {
          this.$refs["overRightLengthRef"].focus();
        } else if (column.label == "超高") {
          this.$refs["overHeightLengthRef"].focus();
        } else if (column.label == "超标件数") {
          this.$refs["overDigitRef"].focus();
        } else if (column.label == "超标体积") {
          this.$refs["overVolumeRef"].focus();
        } else if (column.label == "超标重量") {
          this.$refs["overGrossweightRef"].focus();
        } else if (column.label == "超码备注") {
          this.$refs["memoRef"].focus();
        }
      });
    },
    //输入框失去焦点事件
    inputBlur(scope) {
      this.rowIndex = -1;
      this.columnIndex = -1;
    },
    addNewData() {
      this.data.push({
        overFrontLength: 0,
        overBackLength: 0,
        overLeftLength: 0,
        overRightLength: 0,
        overHeightLength:0,
        overDigit:0,
        overVolume:0,
        overGrossweight:0,
        memo:""
      });
    },
    deleteData(index) {
      this.data.splice(index, 1);
    },
  },
  mounted() {},
});
</script>

<style lang="scss" scoped>
.container {
  padding: 8px 0 0 8px;
  .btn-box {
    margin-bottom: 8px;
  }
}
</style>
